<template>
	<el-table v-loading="loading" :data="dataList" border class="layout-table">
		<el-table-column type="index" header-align="center" align="center" fixed="left" label="序号" width="80"></el-table-column>
		<el-table-column prop="stepName" label="流程环节" header-align="center" align="center">
			<template #default="scope">
				<span>{{ scope.row.stepName }}</span>
				<br />
				<span>({{ scope.row.deadLine }})</span>
			</template>
		</el-table-column>
		<el-table-column prop="status" label="当前状态" header-align="center" align="center"></el-table-column>
		<el-table-column prop="matlConfirm" label="企业材料提交情况" header-align="center" align="center">
			<template #default="scope">
				<span>{{ scope.row.matlConfirm === null ? '--' : scope.row.matlConfirm }}</span>
			</template>
		</el-table-column>
		<el-table-column prop="startTime" label="开始时间" header-align="center" align="center">
			<template #default="scope">
				<span>{{ scope.row.startTime === null ? '--' : scope.row.startTime }}</span>
			</template>
		</el-table-column>
		<el-table-column prop="completionTime" label="完成时间" header-align="center" align="center">
			<template #default="scope">
				<span>{{ scope.row.completionTime === null ? '--' : scope.row.completionTime }}</span>
			</template>
		</el-table-column>
		<el-table-column prop="duration" label="持续时间" header-align="center" align="center">
			<template #default="scope">
				<span>{{ scope.row.duration === null ? '--' : scope.row.duration }}</span>
			</template>
		</el-table-column>
		<el-table-column prop="updateUserName" label="处理人" header-align="center" align="center"></el-table-column>
		<el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
		<el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
			<template #default="scope">
				<el-button v-auth="'project:project-step-detail:page'" type="warning" link @click="openRecord(scope.row.stepId)">处理记录 </el-button>
				<el-button
					type="primary"
					:disabled="scope.row.branchPath === 1"
					link
					:title="scope.row.branchPath === 1 ? (scope.row.completionTime ? '已完成该环节' : '企业尚未确认提交资料') : ''"
					@click="addOrUpdateHandle(scope.row.id)"
					>处理
				</el-button>
				<el-popconfirm
					width="220"
					confirm-button-text="确认"
					cancel-button-text="取消"
					:icon="InfoFilled"
					icon-color="#626AEF"
					title="确认重置该环节内容?"
					@confirm="openReset(scope.row.id)"
				>
					<template #reference>
						<el-button v-auth="'project:process-states:reset'" type="danger" link> 重置</el-button>
					</template>
				</el-popconfirm>
			</template>
		</el-table-column>
	</el-table>
	<step-states-handle ref="stepStatesRef" @refresh-data-list="getStepInfo"></step-states-handle>
	<!-- 查看处理记录 -->
	<handle-record ref="handleRecordRef"></handle-record>
</template>

<script setup lang="ts" name="ProjectProcessStatesIndex">
import { ref, onMounted, watch } from 'vue'
import { resetProcessStatus, useProcess_getStepStates } from '@/api/project/states'
import StepStatesHandle from './step-states-handle.vue'
import HandleRecord from './handle-record.vue'
import { InfoFilled } from '@element-plus/icons-vue'

const loading = ref(false)
const dataList = ref([])
const stepStatesRef = ref()
const handleRecordRef = ref<InstanceType<typeof HandleRecord>>()

interface Props {
	projectId: number
	stepId: number
}

const props = defineProps<Props>()
onMounted(async () => {
	await getStepInfo()
})

const getStepInfo = async () => {
	loading.value = true
	useProcess_getStepStates(props.projectId, props.stepId)
		.then(res => {
			// @ts-ignore
			if (res.code === 0) {
				dataList.value = res.data
			}
		})
		.finally(() => {
			loading.value = false
		})
}

watch(
	() => props.stepId,
	async (newValue, oldValue) => {
		await getStepInfo()
	}
)

const addOrUpdateHandle = (id: number) => {
	// console.log(id)
	// stepStatesRef.value.init = id
	stepStatesRef.value.open(id)
}

const openRecord = (stepId: number) => {
	handleRecordRef.value?.open(props.projectId, stepId)
}
const openReset = (id: number) => {
	loading.value = true
	resetProcessStatus(id)
		.then(res => {
			// @ts-ignore
			// if (res.code === 0) {
			// 	dataList.value = res.data
			// }
		})
		.finally(() => {
			loading.value = false
		})
}
window.addEventListener('popstate', function () {
	window.history.forward()
})
</script>
